<template>
    <div class="needs-box">
      <div class="search3">
        <el-input  maxlength="100" clearable style="width:290px;"/>
        <img src="../assets/img/search.png" class="search-icon" @click="queryGoods"/>&nbsp;&nbsp;
          <i style="color:#696969;font-size:13px;font-style:normal;">&nbsp;热门搜索：
            <a class="tag-item" @click="handleTopicDetail('苹果')">苹果</a> 
            <a class="tag-item" @click="handleTopicDetail('新疆哈密瓜')">新疆哈密瓜</a>  
            <a class="tag-item" @click="handleTopicDetail('樱桃')">樱桃</a>  
            <a class="tag-item" @click="handleTopicDetail('西红柿')">西红柿</a>  
            <a class="tag-item" @click="handleTopicDetail('水稻')">水稻</a>  
            <a class="tag-item" @click="handleTopicDetail('玉米')">玉米</a>  
            <a class="tag-item" @click="handleTopicDetail('赣南脐橙')">赣南脐橙</a> 
          </i>
      </div>
      <div class="purchase-content" v-for="item in goods" :key="item.orderId" @click="toPurchaseDetails(item.orderId)">
        <div 
       	class="purchase-item">
          <div class="title">
            <span class="tips">{{item.type === 'needs'?'[求购]':''}}</span>
            <span class="title-content">{{ item.title }}</span>
          </div>
          <div class="content">{{ item.content }}</div>
          <div class="update-time">{{ formatDate(item.updateTime)}}</div>
        </div>
      </div>
    </div>
  </template>

<script lang="ts" setup>
import { useRouter} from 'vue-router';

const searchValue = ref<string>('');

const { goods } = defineProps({
  goods: {
    type: Object, // 接收的参数类型
    default: {
      orderId: '',
      picture: '',
      content: '',
      price: '',
      ownName: '',
      createTime: '',
      type: '',
    }
  },
})

function handleTopicDetail(str:string){
    emit('queryGoods', str)
}

const emit = defineEmits(['queryGoods',])
const queryGoods = () => {
  emit('queryGoods', searchValue.value)
}

function formatDate(createdate: string) {
  const date = new Date(createdate);
  return date.toLocaleDateString();
}

const router = useRouter();

function toPurchaseDetails(orderId: string){
  router.push({
    name: 'purchasedetails',
    params: {
      orderId: orderId
    }
  });
}
</script>

<style lang='less' scoped>
.needs-box{
  width: 100%;
  .search3 {
    height: 60px;
    background-color: white;
    padding: 10px 20px;
    margin: 10px auto;
    width: 1100px;
    .tag-item{
      margin-right: 10px;
      cursor: pointer;
    }
    .search-icon{
      position:relative;
      bottom:-13px;
      left: -2px;
      cursor: pointer;
    }
  }
  .purchase-content{
    background: #fff;
    padding: 20px;
    width: 1100px;
    margin: 0 auto;
    .purchase-item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .title{
        width: 620px;
        /*超出的部分隐藏*/
        overflow: hidden;
        /*文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*限制在一个块元素显示文本的行数*/
        -webkit-line-clamp: 1;
        /*设置或检索伸缩盒对象的子元素排列方式*/
        -webkit-box-orient: vertical;
        .tips{
          color: #999;
        }
        .title-content{
          cursor: pointer;
          &:hover{
            color: #035D1C;
            text-decoration: underline;
          }
        }
      }
      .content{
        width: 300px;
        margin-left: 20px;
        /*超出的部分隐藏*/
        overflow: hidden;
        /*文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*限制在一个块元素显示文本的行数*/
        -webkit-line-clamp: 1;
        /*设置或检索伸缩盒对象的子元 素排列方式*/
        -webkit-box-orient: vertical;
      }
      .update-time{
        width: 100px;
        text-align: right;
      }
    }
  }
}



.search3 /deep/ .el-input--suffix .el-input__inner{
  height: 35px;
  line-height: 35px;
}
</style>